<template>
	<view>
		<view class="container">
			<view class="top">
				<image src="/static/icon/icon_team.png" class="icon_team"></image>
				<view class="teamnum">
					<view class="fs40">{{ team_num }}</view>
					<view class="fs24 pt10">我的团队</view>
					<button @tap="jumpPages" data-url="/pages/member/invite/invite" data-type="1"
						class="rightnow">立即邀请</button>
				</view>
			</view>
			<view class="title">团队成员</view>
			<view class="memberlist">
				<template v-if="userList.total > 0">
					<template v-for="(item, index) in userList.data">
						<view class="listitem flex-box">
							<image :lazy-load="true" :src="item.avatar" class="avatar" mode="aspectFill"></image>
							<view class="flex-grow-1">
								<view class="flex-box flex-between pb20">
									<view class="fs30">{{ item.nickname }}</view>
								</view>
								<view class="fs24 col89">{{ item.jointime_text }}加入</view>
							</view>
						</view>
					</template>
					<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
						nomore-text="没有更多了" />
				</template>
				<template v-else>
					<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
					</u-empty>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				team_num: 0,
				// 列表
				userList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
				loadStatus: 'loadmore', //加载状态
				member: [{
						img: '/static/static/images/icon_avatar.png',
						name: '黄豆豆',
						time: '18:35',
						date: '2019-02-02',
						point: '+100.00'
					}

				]
			};
		},
		onLoad: function(options) {
			this.initData();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			if (this.userList.current_page >= this.userList.last_page) {
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getuserList();
			}
		},
		methods: {
			// 获取成员列表信息
			getuserList: function() {
				var that = this;
				var json = {
					city: that.now_city
				};
				json.page = Number(that.userList.current_page) + 1;

				if (json.page > 1 && that.userList.current_page >= that.userList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse/user/my_team_list', json, function(res) {
					var userList = res.data;

					if (json.page > 1) {
						var now_userList_data = that.userList.data || [];
						var now_userList_data = now_userList_data.concat(userList.data);
						userList.data = now_userList_data;
					}

					that.userList = userList;

				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				functions.getAjaxData('/api/xiluhouse/User/index', {}, function(res) {
					that.team_num = res.data.team_num

				});
				that.userList.current_page = 0;
				// 获取该城市的房源列表

				that.getuserList();
			},
			jumpPages(event) {
				var type = Number(event.currentTarget.dataset.type);
				var url = event.currentTarget.dataset.url;
				console.log(url)

				if (type == 1) {
					uni.navigateTo({
						url: url
					});
				} else if (type == 2) {
					app.globalData.nowThat = this;
					functions.checkLogin(function(ret) {
						if (ret) {

							uni.navigateTo({
								url: url
							});
						} else {
							functions.toast('请先登录');
						}
					});
				} else if (type == 3) {
					var tel = app.globalData.config.platform_contact_tel;
					functions.phoneCall({
						phoneNumber: tel //仅为示例，并非真实的电话号码
					});
				}
			},
		}
	};
</script>

<style lang="scss">
	.top {
		width: 670rpx;
		height: 261rpx;
		box-shadow: 0px 4rpx 40rpx rgba(3, 103, 179, 0.3);
		border-radius: 15rpx;
		margin: 30rpx 40rpx 40rpx;
		position: relative;
	}

	.icon_team {
		width: 670rpx;
		height: 261rpx;
	}

	.teamnum {
		position: absolute;
		top: 36rpx;
		left: 60rpx;
		text-align: center;
		color: #fff;
	}

	.top .rightnow {
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 30rpx rgba(184, 189, 202, 0.3);
		padding: 0;
		margin: 0;
		line-height: 60rpx;
		font-weight: normal;
		font-size: 24rpx;
		margin-top: 30rpx;
	}

	.title {
		padding: 0 40rpx;
		font-size: 34rpx;
	}

	.memberlist {
		padding: 11rpx 40rpx;
	}

	.listitem {
		padding: 30rpx 0;
		border-bottom: 1px solid #f4f3f3;
	}

	.listitem .avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.colff {
		color: #FF3333;
	}
</style>
